// POPUPS and tooltip
// --------

@import "../../../css/assets/dpl/variables.less";
@import "../../../css/assets/dpl/mixins.less";
@import 'variables.less';

#popupArrow {

    .top(@arrowWidth: 5px, @color: @black){
        bottom: 0;
        left: 50%;
        margin-left: -@arrowWidth;
        border-left: @arrowWidth solid transparent;
        border-right: @arrowWidth solid transparent;
        border-top: @arrowWidth solid @color;
    }

    .left(@arrowWidth: 5px, @color: @black){
        top: 50%;
        right: 0;
        margin-top: -@arrowWidth;
        border-top: @arrowWidth solid transparent;
        border-bottom: @arrowWidth solid transparent;
        border-left: @arrowWidth solid @color;
    }
    .bottom(@arrowWidth: 5px, @color: @black){
        top: 0;
        left: 50%;
        margin-left: -@arrowWidth;
        border-left: @arrowWidth solid transparent;
        border-right: @arrowWidth solid transparent;
        border-bottom: @arrowWidth solid @color;
    }
    .right(@arrowWidth: 5px, @color: @black){
        top: 50%;
        left: 0;
        margin-top: -@arrowWidth;
        border-top: @arrowWidth solid transparent;
        border-bottom: @arrowWidth solid transparent;
        border-right: @arrowWidth solid @color;
    }
}

.ks-popup {
    z-index: @zindexPopover;
    padding: 5px;
    &.ks-popup-top {
        margin-top: -5px;
    }
    &.ks-popup-right {
        margin-left: 5px;
    }
    &.ks-popup-bottom {
        margin-top: 5px;
    }
    &.ks-popup-left {
        margin-left: -5px;
    }
    &.ks-popup-top .ks-popup-arrow { #popupArrow > .top();
    }
    &.ks-popup-right .ks-popup-arrow { #popupArrow > .right();
    }
    &.ks-popup-bottom .ks-popup-arrow { #popupArrow > .bottom();
    }
    &.ks-popup-left .ks-popup-arrow { #popupArrow > .left();
    }
    .ks-popup-arrow {
        position: absolute;
        width: 0;
        height: 0;
    }
}

.ks-popup-inner {
    padding: @popupInnerPadding;
    overflow: hidden;
    background: @popupInnerBackgroundColorIE; // has to be full background declaration for IE fallback
    background: @popupInnerBackgroundColor;
    border-radius: @popupInnerBorderRadius;
    .box-shadow(@popupInnerBoxShadow);
}

.ks-popup-title {
    padding: @popupTitlePadding;
    margin: 0;
    line-height: 1;
    background-color: @popupTitleBackgroundColor;
    border-bottom: @popupTitleBorderBottom;
    border-radius: @popupTitleBorderRadius;
}

.ks-popup-inner-content {
    padding: @popupContentPadding;
    background-color: @popupContentBackgroundColor;
    border-radius: @popupContentBorderRadius;
}

.ks-tooltip-inner {
    max-width: @tooltipMaxWidth;
    padding: @tooltipPadding;
    color: @tooltipColor;
    text-align: @tooltipTextAlign;
    text-decoration: none;
    background-color: @tooltipBackgroundColor;
    border-radius: @tooltipBorderRadius;
}